<template>
  <!-- 输出参数 -->
  <div class="step-servicesccs">
    <el-row type="flex" align="middle" justify="space-between">
      <el-col :span="5" v-if="!isView">
        <add-button @click="addParams"/>
        <add-button text="批量新增" @click="batcAaddParams"/>
      </el-col>
      <el-col :span="4">
        <span>支持参数属性：</span>
        <el-switch
          v-if="!isView"
          v-model="formData.outparamWithAttr"
          active-color="#13ce66"
        >
        </el-switch>
        <yes-no-tag
          v-else
          yesText="是"
          noText="否"
          :value="formData.outparamWithAttr ? 'Y' : 'N'"
        />
      </el-col>
    </el-row>
    <el-table
      style="margin: 10px 0"
      row-key="nodeId"
      default-expand-all
      :data="fbOptions.outputData"
    >
      <el-table-column
        label="参数名"
        prop="nodeName"
        :show-overflow-tooltip="true"
        min-width="100"
      >
        <template #default="scope">
          <div style="display: inline-block">
            <span>{{ scope.row.nodeName }}</span>
            <el-tag size="mini" v-if="scope.row.isAttr === 'Y'">属性</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="参数描述"
        prop="nodeLabel"
        :show-overflow-tooltip="true"
        min-width="100"
      />
      <el-table-column label="参数类型" prop="nodeType" width="140">
        <template #default="scope">
          <span>{{ selectDictLabel(fbOptions.keyTypeList, scope.row.nodeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="是否必须"
        prop="nodeNeededable"
        width="80"
        align="center"
      >
        <template #default="scope">
          <yes-no-tag
            yesText="是"
            noText="否"
            :value="scope.row.nodeNeededable || ''"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="220" v-if="!isView">
        <template #default="scope">
          <text-add-button
            v-if="formData.outparamWithAttr && scope.row.isAttr !== 'Y'"
            text="属性"
            @click="addAttr(scope.row)"
          />
          <text-add-button
            v-if="scope.row.nodeType == 'object'"
            text="子节点"
            @click="addChildParams(scope.row)"
          />
          <text-edit-button @click="handleEdit(scope.row)"/>
          <text-delete-button
            @click="handleDelete(scope.row.nodeId)"
            :title="'是否确认删除' + scope.row.nodeName + '?'"
          />
        </template>
      </el-table-column>
    </el-table>
    <add-params
      ref="addParamsRef"
      :title="title"
      modelType="sccs"
      v-model:visible="visible"
      :nodeTypeList="initData.isAttr ? attrNodeTypeList : nodeTypeList"
      :rules="rules"
      :initData="initData"
      @onOk="onOk"
    />
    <batch-add-params
      title="批量新增输出参数"
      v-model:batchVisible="batchVisible"
      @onOk="onBatchOk"
    />
  </div>
</template>

<script>
// import {mapActions, mapState} from "vuex";
import {
  InParamOutInsert,
  outUpdateById,
  selectparentDetail,
  outDeleteByIds,
  batchOutParamInsert, serviceOutputData
} from "@slc/api/slc/inventory";
import AddParams from "./add-params.vue";
import BatchAddParams from "./batch-add-params.vue";

export default {
  name: "step-sccs",
  components: {
    AddParams,
    BatchAddParams,
  },
  props: {
    formData: {
      type: Object,
      default: () => {
      }
    },
    fbOptions: {
      type: Object,
      default: () => {
      }
    },
  },
  data() {
    return {
      title: "",
      visible: false,
      batchVisible: false,
      nodeTypeList: [
        {dictValue: "string", dictLabel: "字符串 (String)"},
        {dictValue: "long", dictLabel: "整数 (Long)"},
        {dictValue: "decimal", dictLabel: "小数 (Decimal)"},
        {dictValue: "object", dictLabel: "JSON对象 (Object)"},
        {dictValue: "array", dictLabel: "JSON数组 (Array)"},
      ],
      attrNodeTypeList: [
        {dictValue: "string", dictLabel: "字符串 (String)"},
        {dictValue: "long", dictLabel: "整数 (Long)"},
        {dictValue: "decimal", dictLabel: "小数 (Decimal)"},
      ],
      rules: {
        nodeType: [
          {required: true, message: "参数类型不可以为空", trigger: "blur"},
        ],
        elementType: [
          {required: true, message: "元素类型不可以为空", trigger: "blur"},
        ],
        nodeName: [
          {required: true, message: "参数名不可以为空", trigger: "blur"},
        ],
        nodeLabel: [
          {required: true, message: "参数描述不可以为空", trigger: "blur"},
        ],
      },
      initData: {},
      apiOutTable: [],
      serviceOutChangeTable: [],
    };
  },
  computed: {
    isView() {
      return (
        this.fbOptions.operationType === "view"
      );
    },
  },
  activated() {
    this.getOutputData({serviceVerId: this.formData.serviceVerId});
  },
  methods: {
    async getOutputData(query = {}) {
      const res = await serviceOutputData(query)
      if (res.code === '200') {
        this.fbOptions.outputData = res.data;
      }
    },
    batcAaddParams() {
      this.batchVisible = true;
    },
    addParams() {
      this.$refs["addParamsRef"].onReset();
      this.title = "新增输入参数";
      this.type = "add";
      this.initData = {
        parentNode: "根节点",
        nodeParentId: 0,
        nodeType: "",
        elementType: "",
        nodeName: "",
        nodeLabel: "",
        nodeNeededable: true,
        isAttr: false,
      };
      this.visible = true;
    },
    addAttr(row) {
      this.$refs["addParamsRef"].onReset();
      this.title = "新增输入参数-属性";
      this.type = "add";
      this.initData = {
        nodeParentId: row.nodeId,
        parentNode: `${row.nodeName}(${row.nodeLabel})`,
        nodeType: "",
        elementType: "",
        nodeName: "",
        nodeLabel: "",
        nodeNeededable: true,
        isAttr: true,
      };
      this.visible = true;
    },
    addChildParams(row) {
      this.$refs["addParamsRef"].onReset();
      this.title = "新增输入参数-子节点";
      this.type = "add";
      this.initData = {
        nodeParentId: row.nodeId,
        parentNode: `${row.nodeName}(${row.nodeLabel})`,
        nodeType: "",
        elementType: "",
        nodeName: "",
        nodeLabel: "",
        nodeNeededable: true,
        isAttr: false,
      };
      this.visible = true;
    },
    async handleEdit(row) {
      const res = await selectparentDetail(row.nodeParentId);
      let parentNode;
      if (res.data) {
        parentNode = `${res.data.nodeName}(${res.data.nodeLabel})`;
      } else {
        parentNode = "根节点";
      }
      this.title = "修改输入参数";
      this.type = "edit";
      this.initData = {
        nodeParentId: row.nodeParentId ? row.nodeParentId : 0,
        parentNode: parentNode,
        nodeId: row.nodeId,
        nodeType: row.nodeType,
        elementType: row.elementType,
        nodeName: row.nodeName,
        nodeLabel: row.nodeLabel,
        nodeNeededable: row.nodeNeededable === "Y",
        isAttr: row.isAttr === "Y",
      };
      this.visible = true;
    },
    async handleDelete(nodeId) {
      const res = await outDeleteByIds(nodeId);
      if (res.code === "200") {
        this.msgSuccess("删除成功");
        this.getOutputData({serviceVerId: this.formData.serviceVerId});
      }
    },
    async onOk(formData) {
      const params = {
        serviceVerId: this.formData.serviceVerId,
        ...formData,
        isAttr: formData.isAttr ? "Y" : "N",
        nodeNeededable: formData.nodeNeededable ? "Y" : "N",
        elementType: formData.nodeType === "array" ? formData.elementType : "",
      };
      let fn;
      if (this.type === "add") {
        fn = InParamOutInsert;
      } else {
        fn = outUpdateById;
      }
      const res = await fn(params);
      if (res.code === "200") {
        this.visible = false;
        this.getOutputData({serviceVerId: this.formData.serviceVerId});
      }
    },
    async onBatchOk(val) {
      const params = {
        serviceVerId: this.formData.serviceVerId,
        ...val
      }
      const res = await batchOutParamInsert(params)
      if (res.code === '200') {
        this.batchVisible = false
        this.getOutputData({serviceVerId: this.formData.serviceVerId});
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.step-servicesccs {
  width: 100%;
  padding: 16px;

  .flex-end {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
